<template>
  <div class="group-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-fm">
        <el-input
          style="width: 200px"
          placeholder="小队名称"
          v-model="dg.ps.find"
        />
        <el-button type="primary" icon="el-icon-search" @click="getDgList"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="getAddMdState(true)"
          >新增</el-button
        >
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'小队列表'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 54"
      @header-dragend="dragHeader"
      :row-class-name="rowClassName"
      border fit
      @selection-change="selRowChange"
      @select="selRow"
    >
      <el-table-column
        fixed="left"
        type="selection"
        width="40"
      ></el-table-column>
      <fragment v-for="col in dg.columns" :key="col.field">
        <el-table-column
          :class-name="dg.dgName"
          :prop="col.field"
          :label="col.label"
          :width="col.width"
        >
          <template slot-scope="{ row }">
            <template v-if="col.field == 'oper'">
              <el-button type="primary" @click="handleEdit(row)"
                >修改</el-button
              >
              <el-button type="danger" @click="handleDelete(row)"
                >删除</el-button
              >
            </template>
            <template v-else>{{ getColVal(row, col.field) }}</template>
          </template>
        </el-table-column>
      </fragment>
    </el-table>
    <pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList"
    />

    <!--  添加  -->
    <AddTeam
      v-if="md.add.state"
      :state="md.add.state"
      @getMdState="getAddMdState"
      @reloadDg="getDgList"
    />

    <UpdateTeam
      v-if="md.upd.state"
      :state="md.upd.state"
      :datas="currentData"
      @getMdState="getUpdMdState"
      @reloadDg="getDgList"
    />
  </div>
</template>

<script>
import DataGridResize from "@/views/mixins/DataGridResize";
import DataGridBase from "@/views/mixins/DataGridBase";
import elDragDialog from "@/directive/el-drag-dialog";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";
import {
  getGroupList,
  groupDelete,
  getGroupById,
  deleteTeam,
} from "@/api/services/logistics.service";
import AddTeam from "./add-group/addTeam";
import UpdateTeam from "./upd-group/updateTeam";

import UpdGroup from "./upd-group/updateGroup";
import Group from "./group";

export default {
  name: "Team",
  mixins: [DataGridResize, DataGridBase],
  directives: { elDragDialog },
  components: {
    TableSelfSet,
    Pagination,
    UpdGroup,
    Group,
    AddTeam,
    UpdateTeam,
  },
  data() {
    let cols = [
      { label: "小队名称", field: "teamName" },
      { label: "负责人", field: "teamLeader.realName" },
      { label: "操作", field: "oper" },
    ];

    return {
      dg: {
        dgName: "dg",
        tbName: "teamListTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
          find: "",
        },
      },
      md: {
        // 弹框数据
        add: { state: false },
        upd: { state: false }, // 修改车辆
      },
      currentData: null,
    };
  },
  created() {
    const that = this;
    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  mounted() {
    this.bodyHeight = this.bodyHeight - 50;
  },
  methods: {
    handleEdit(row) {
      getGroupById({ id: row.id })
        .then((res) => {
          this.currentData = res.data;
          this.md.upd.state = true;
        })
        .catch(() => {
          this.U.qerror("数据获取失败，请稍后再试");
        });
    },
    handleDelete(row) {
      this.U.qconfim(`确认删除小队【${row.teamName}】吗？`).then(r => {
        if(r){
          let loading = this.U.qloading("删除中...");
          deleteTeam({ id: row.id }).then((res) => {
            this.U.qclose(loading);
            const { code, msg } = res;
            if (code !== 1) {
              return this.U.qerror(msg);
            }
            this.U.qsuccess(msg);
            this.getDgList();
          }).catch(() => {
            this.U.qclose(loading);
          });
        }
      });
    },
    /**
     * 选中行
     * @param selection 选中的所有行
     * @param row       当前被点击的行
     */
    selRow(selection, row) {
      this.dg.selRows = selection;
    },
    /**
     * 展开一行事件
     * @param row 当前被点击的行
     * @param expandedRows 展开的所有行
     */
    saveRowExpand(row, expandedRows) {
      const that = this;
      that.dg.rowExpands.push(row);
    },
    /** 获取-分页列表数据 */
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      getGroupList(this.dg.ps)
        .then((res) => {
          this.U.qclose(loading);
          const { code, data, count } = res;
          if (code === 1) {
            let list = data;
            list.forEach((it) => {
              it.dgName = this.dg.dgName;
            });
            this.dg.list = list;
            this.dg.total = count;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    /**
     * 打开添加弹框
     */
    getAddMdState(e) {
      this.md.add.state = e;
    },
    /**
     * 打开修改弹框
     * @param e 弹框显隐状态
     */
    getUpdMdState(e) {
      // 关闭弹框
      if (e === false) {
        this.md.upd.state = e;
        return;
      }
      // 打开弹框
      let len = this.dg.selRows;
      if (len.length !== 1) {
        this.U.qerror("请选择一条数据");
      } else {
        this.md.upd = { state: e, data: this.dg.selRows[0] };
      }
    },
    /**
     * 删除
     */
    deleteVehicle() {
      const that = this;

      let len = that.dg.selRows.length;
      if (len !== 1) {
        that.U.qerror("请选择一条数据");
      } else {
        let row = that.dg.selRows[0];

        that.U.qconfim(`确认删除小组【${row.groupName}-${row.linkName}】吗？`).then(r => {
          if(r){
            let loading = that.U.qloading("删除中...");
            groupDelete({ id: row.id }).then((res) => {
              that.U.qclose(loading);

              if (res.code !== 1) {
                that.U.qerror(res.msg);
              } else {
                that.U.qsuccess(res.msg);

                // 删除一行
                that.dg.list.splice(row.index, 1);
              }
            });
          }
        });
      }
    },
  },
};
</script>
